<template>
	<view class="container">
		<view class="box">
			<view class="side front"></view>
			<view class="side back"></view>
			<view class="side left"></view>
			<view class="side right"></view>
			<view class="side top"></view>
			<view class="side bottom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {

		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		perspective: 800px;
	}

	.box {
		width: 200px;
		height: 200px;
		position: relative;
		transform-style: preserve-3d;
		animation: rotate 5s infinite linear;
	}

	.side {
		position: absolute;
		width: 200px;
		height: 200px;
		background-color: rgba(255, 0, 0, 0.8);
		opacity: 0.8;
	}

	.front {
		transform: translateZ(100px);
	}

	.back {
		transform: translateZ(-100px) rotateY(180deg);
	}

	.left {
		transform: translateX(-100px) rotateY(-90deg);
	}

	.right {
		transform: translateX(100px) rotateY(90deg);
	}

	.top {
		transform: translateY(-100px) rotateX(90deg);
	}

	.bottom {
		transform: translateY(100px) rotateX(-90deg);
	}

	@keyframes rotate {
		0% {
			transform: rotateY(0deg) rotateX(0deg);
		}

		100% {
			transform: rotateY(360deg) rotateX(360deg);
		}
	}
</style>